<template>
    <view class="main">
        <view class="dispaly-col-center more">
            <image class="share" src="/static/icon/shra.png" @click="isVisible = true" />
            <image src="/static/icon/car.png" v-if="props.show" />
        </view>
    </view>
    <nut-popup position="bottom" round :custom-style="{ height: 'auto' }" v-model:visible="isVisible">
        <view class="b">
            <view class="op">
                <view class="btn-item" v-for="item in menuItems" :key="item.type">
                    <button :open-type="item.type == 1 ? 'share' : ''" @click="clickItem(item)">{{ item.name }}</button>
                </view>
                <view class="s"></view>
                <view class="btn-item " @click="isVisible = false">
                    <button>取消</button>
                </view>
            </view>
        </view>
    </nut-popup>

</template>

<script setup>
import { ref, onMounted } from 'vue';
import { serHb } from '@/api/apiList'

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    id: String | Number
})

const isVisible = ref(false)
const showBasic = ref(false)
const menuItems = [
    {
        name: '分享赚佣金',
        type: 1
    },
    {
        name: '生成海报',
        type: 2
    }
];

let hb = ref('')
const getSerHb = async () => {
    uni.showLoading({
        title: '加载中'
    })
    const res = await serHb(props.id)
    if (res.code == 200) {
        hb.value = res.msg
        emit('h', hb.value)
        uni.hideLoading()
    }
}
const emit = defineEmits(['show', 'h'])
const clickItem = async (item) => {
    isVisible.value = false
    if (item.type == 2) {
        await getSerHb()
        emit('show', true)
    }
}




</script>
<style lang="scss" scoped>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.h-main {
    background-color: transparent;
}

button {
    padding: 0;
    margin: 0;
}

button::after {
    border: none;
}

.b {
    background-color: #f8f8f8;

    .op {
        background-color: #fff;

        .s {
            height: 20rpx;
            width: 100%;
            background-color: #f8f8f8;
        }

        .btn-item {
            padding: 39rpx 0;
            border-bottom: 1rpx solid #f8f8f8;

            button {
                border: none;
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 32rpx;
                color: #000000;
                background-color: #fff;
            }
        }
    }
}


.main {
    .more {
        position: fixed;
        bottom: 238rpx;
        right: 40rpx;

        .share {
            margin-bottom: 20rpx;
        }

        image {
            width: 74rpx;
            height: 74rpx;
        }
    }

}
</style>